<template>
<view>
<!--pages/search/search.wxml-->
<!--<import src="../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}"/> -->
<view>
  <view class="input-box" style="margin: 0 40rpx;">
    <image src="/static/images/search.png"></image>
    <input placeholder="请输入内容搜索" confirm-type="search" @input="inputTap" @confirm="confirmTap" :value="keywords">
    <image src="/static/images/cancel.png" @tap="delTap"></image>
  </view>
  <!-- <navigator class="cont-list" url="../article/detail/detail?id={{item.id}}" wx:for="{{searchList}}" wx:key="id" >
    <view class="title">{{item.title}}</view>
    <view class="cont-flex" wx:if="{{item.guide}}">
      <image src="{{item.images}}" wx:if="{{item.images}}"></image>
      <text>{{item.guide}}</text>
    </view>
    <text class="time">{{item.publictime}}</text>
  </navigator> -->
  <view v-if="showSearch">
    <!-- 历史搜索 -->
    <view v-if="isHiddenHistory" style="margin:20rpx 40rpx 0 40rpx;">
      <view class="his_box">
        <text class="his_text">历史搜索</text>
        <image class="del_his" src="/static/images/ic_search_delete.png" @tap="onDelhistory"></image>
      </view>
      <view class="his_cont">
        <view v-for="(item, index) in historyList" :key="index" @tap="bindhisNav" :data-name="item.value">
          <view class="hisbq">{{item.value}}</view>
        </view>
      </view>
    </view>
    <!-- 大家都在搜 -->
    <view style="margin:20rpx 40rpx 0 40rpx;" v-if="hotList!='' && !keywords">
      <view class="his_box">
        <text class="his_text">大家都在搜</text>
      </view>
      <view class="his_cont">
        <view v-for="(item, index) in hotList" :key="index" @tap="hotwordsBtn" :data-value="item.ci">
          <view class="hisbq">{{item.ci}}</view>
        </view>
      </view>
    </view>
  </view>

  <!-- 结果列表 -->
  <view>
    <!-- 服务 -->
    <view class="res-box" v-if="servList!=''">
      <view class="z-box">
        <image src="/static/images/zt_icon.png"></image>
        <text>服务</text>
      </view>
      <view class="z-list">
        <view v-for="(item, index) in servList" :key="index" @tap="servBtn" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">{{item.title}}</view>
      </view>
      <navigator :url="'./moredata/moredata?keywords=' + keywords + '&name=服务'" class="seemore" v-if="servLength>3">查看更多</navigator>
      <!-- <view class="seemore" wx:if="{{servLength>3}}" bindtap="moreBtn" data-name="服务">查看更多</view> -->
    </view>
    <!-- 资讯 -->
    <view class="res-box" v-if="searchList!=''">
      <view class="z-box">
        <image src="/static/images/zx_icon.png"></image>
        <text>资讯</text>
      </view>
      <view class="z-list">
        <navigator v-for="(item, index) in searchList" :key="index" :url="'../article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">{{item.title}}</navigator>
      </view>
      <navigator class="seemore" v-if="searchLength>3" :url="'./moredata/moredata?keywords=' + keywords + '&name=资讯'">查看更多</navigator>
      <!-- <view class="seemore" wx:if="{{searchLength>3}}" bindtap="moreBtn" data-name="资讯">查看更多</view> -->
    </view>
    <!-- 办事攻略 -->
    <view class="res-box" v-if="bsyList!=''">
      <view class="z-box">
        <image src="/static/images/bsy_icon.png" style="width: 26rpx;height: 29rpx;"></image>
        <text>办事攻略</text>
      </view>
      <view class="z-list">
        <navigator v-for="(item, index) in bsyList" :key="index" :url="'../article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">{{item.title}}</navigator>
      </view>
      <navigator class="seemore" v-if="bsyLength>3" :url="'./moredata/moredata?keywords=' + keywords + '&name=指南'">查看更多</navigator>
      <!-- <view class="seemore" wx:if="{{bsyLength>3}}" bindtap="moreBtn" data-name="办事攻略">查看更多</view> -->
    </view>
  </view>

  <!-- null -->
  <view class="null-box" v-if="!showSearch && searchList =='' && servList =='' && bsyList== ''">
    <image src="/static/images/nullsearch.png">
      <view class="texts">抱歉，没有找到
        <text style="color:#f60">{{keywords}}</text>相关的结果，建议您尝试更换检索词。</view>
    </image>
  </view>
</view>

<!-- 底部logo -->
<!-- <view class="bottom">
  <image src="../../images/logo.png"></image>
</view> -->
</view>
</template>

<script>
// pages/search/search.js
//获取应用实例
const app = getApp();
const util = require("../../utils/util.js");
var page = 1;

export default {
  data() {
    return {
      searchList: [],
      servList: [],
      bsyList: [],
      keywords: '',
      isHiddenHistory: false,
      // 历史搜索
      historyList: [],
      // 历史记录数组
      showSearch: true,
      showtk: false // cityname: app.extConfig.cityname,
      // citycode: app.extConfig.citycode,
      ,
      hotList: [],
      servLength: 0,
      searchLength: 0,
      bsyLength: 0,
      citycode: "",
      city: "",
      servFlag: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
    });

    if (options.keywords) {
      this.getServiceData(options.keywords);
      this.getinfoData(options.keywords);
      this.getbsyData(options.keywords);
      this.setData({
        keywords: options.keywords
      });
    }

    util.getUrl(app.globalData.url).then(res => {
      util.cityList().then(res => {
        let citydata = res.allcity.filter(v => v.citycode == this.citycode);
        if (citydata) this.setData({
          city: citydata[0].cityname
        });
      });
      this.getSearchList();
      this.getHotWords();
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {// page++;
    // this.getinfoData(this.data.keywords, page);
  },
  methods: {
    // 搜索的历史记录
    getSearchList() {
      let data = {
        action: "search",
        option: "list",
        version: app.globalData.version,
        openid: uni.getStorageSync("openid"),
        user_id: uni.getStorageSync("user_id")
      };
      util.request('user.php', data, 'POST').then(res => {
        this.setData({
          historyList: res.data.data
        });

        if (res.data.state == 1) {
          this.setData({
            isHiddenHistory: true
          });
        }
      });
    },

    // 添加搜索词
    getAddKeywords(keywords) {
      let data = {
        action: "search",
        option: "add",
        openid: uni.getStorageSync("openid"),
        user_id: uni.getStorageSync("user_id"),
        citycode: this.citycode,
        value: keywords,
        version: app.globalData.version
      };
      util.request('user.php', data, 'POST');
    },

    // 热词搜索接口
    getHotWords() {
      let hotData = {
        action: "hotwords",
        city: uni.getStorageSync("city"),
        version: app.globalData.version
      };
      util.request('service.php', hotData).then(res => {
        this.setData({
          hotList: res.data.data
        });
      });
    },

    // 获取服务搜索结果
    getServiceData(keywords) {
      let serData = {
        action: "tools",
        city: this.city,
        keywords: keywords,
        type: "search",
        version: app.globalData.version
      };
      util.request('service.php', serData).then(res => {
        if (res.data.data) this.setData({
          servFlag: res.data.state,
          servList: res.data.data.slice(0, 3),
          servLength: Object.keys(res.data.data).length
        });
      });
    },

    // 资讯搜索结果
    getinfoData(keywords) {
      let searchData = {
        citycode: this.citycode,
        action: 'list',
        pagesize: 10,
        keywords: keywords,
        // page,
        version: app.globalData.version
      };
      util.request('index.php', searchData, 'GET').then(res => {
        this.setData({
          searchList: res.data.slice(0, 3),
          searchLength: res.data.length
        });
      });
    },

    // 办事搜索结果
    getbsyData(keywords) {
      let searchData = {
        citycode: this.citycode == "sz" ? "bsy" : this.citycode,
        action: 'list',
        pagesize: 10,
        bsy: 1,
        keywords: keywords,
        // page,
        version: app.globalData.version
      };
      util.request('index.php', searchData, 'GET').then(res => {
        this.setData({
          bsyList: res.data ? res.data.slice(0, 3) : '',
          bsyLength: res.data ? res.data.length : ''
        });
      });
    },

    inputTap(e) {
      let keywords = e.detail.value;
      this.setData({
        keywords,
        searchList: [],
        servList: [],
        bsyList: [],
        showSearch: true
      });
    },

    // 输入框回车搜索事件
    confirmTap(e) {
      let keywords = e.detail.value;
      this.setData({
        keywords,
        searchList: [],
        showSearch: false
      });
      this.getAddKeywords(keywords);
      this.getServiceData(keywords);
      this.getinfoData(this.keywords);
      this.getbsyData(keywords);
    },

    // 输入框删除icon事件
    delTap() {
      this.setData({
        keywords: "",
        showSearch: true,
        searchList: [],
        servList: [],
        bsyList: []
      });
    },

    // 清除历史记录事件
    onDelhistory: function (e) {
      let data = {
        action: "search",
        option: "del",
        openid: uni.getStorageSync("openid"),
        user_id: uni.getStorageSync("user_id")
      };
      util.request('user.php', data, 'POST');
      this.setData({
        // historyList: [],
        isHiddenHistory: false
      });
    },
    // 点击历史记录
    bindhisNav: function (e) {
      var keywords = e.currentTarget.dataset.name;
      this.getServiceData(keywords);
      this.getinfoData(keywords);
      this.getbsyData(keywords);
      this.setData({
        showSearch: false,
        keywords
      });
    },

    // 热词点击事件
    hotwordsBtn(e) {
      let keywords = e.currentTarget.dataset.value;
      this.getServiceData(keywords);
      this.getinfoData(keywords);
      this.getbsyData(keywords);
      this.setData({
        showSearch: false,
        keywords
      });
    },

    // 工具、服务点击事件
    servBtn(e) {
      let path = e.currentTarget.dataset.path;
      let appid = e.currentTarget.dataset.appid;
      let linkname = e.currentTarget.dataset.title;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        util.navMethod(path, appid);
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
      let replay = {
        action: "reply",
        title: this.linkname,
        url: this.path,
        openid: uni.getStorageSync("openid")
      };
      util.request('user.php', replay, 'POST');
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    }

  }
};
</script>
<style>
/* pages/search/search.wxss */
.body{margin: 0 30rpx;}
.input-box{height:60rpx;border:1px solid rgba(204,204,204,1);border-radius:30rpx;
  display: flex;align-items: center;font-size: 28rpx;flex: 1;
  padding: 0 30rpx;}
.input-box image{width: 30rpx;height: 30rpx;}
.input-box input{flex: 1;margin:0 20rpx;}
@media (min-width: 768px) {
  .input-box input {
    height: 60rpx;
    line-height: 60rpx;
  }
}

.cont-list{border-bottom: 1rpx solid #cccccc;padding: 30rpx 0;}
.cont-flex{display: flex;flex-direction: row;align-items: center;margin: 25rpx 0;}
.cont-flex image{width: 188rpx;height: 120rpx;flex-shrink: 0;margin-right: 20rpx;}
.cont-flex text{font-size:28rpx;font-family:PingFang SC;font-weight:400;color:rgba(0,0,0,1);
  overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;
  -webkit-box-orient: vertical;line-height: 42rpx;}
.time{font-size:24rpx;font-family:PingFang SC;font-weight:400;color:rgba(153,153,153,1);}
.title{font-size:34rpx;font-family:PingFang SC;font-weight:600;color:rgba(0,0,0,0.8);}

/* .cont-list:last-child{
  border: 0
} */
.bottom{width:100%;background:rgba(243,243,243,1);opacity:1;padding: 20rpx 0;text-align: center;}
.bottom image{width: 154rpx;height:62rpx; }

.null-box{text-align: center;margin-top: 150rpx;}
.null-box image{width:693rpx;height:668rpx;position: relative;}
.texts{font-size:32rpx;font-family:PingFang SC;font-weight:400;color:rgba(51,51,51,1);    
  position: absolute;top:150rpx;width: 510rpx;margin-left: 100rpx;}

/* 历史搜索样式 */
.his_box{display: flex;flex-direction: row;align-items: center;
  justify-content: space-between;margin: 15rpx 0rpx;}
.his_text{font-size: 30rpx;color: #333333;font-weight: bold;}
.del_his{width: 28rpx;height: 28rpx;}

.his_cont{display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;}
.hisbq{background:rgba(238,238,238,1);opacity:1;border-radius:8rpx;font-size: 25rpx;
  font-family:Segoe UI;font-weight:400;color:rgba(118,118,118,1);padding: 10rpx 20rpx;
  margin-bottom: 20rpx;margin-right: 20rpx;}

/* 结果列表 */
.res-box{border-bottom: 15rpx solid #EEEEEE;padding: 20rpx 40rpx 0 40rpx;}
.res-box:last-child{border: 0}
.z-box{display: flex;flex-direction: row;align-items: center;}
.z-box image{width: 27rpx;height: 27rpx;margin-right: 15rpx;}
/* .z-box image:last-child{width: 26rpx;height: 29rpx;} */
.z-box text{font-size:14px;font-family:PingFang SC;font-weight:500;
  color:rgba(167,166,166,1);opacity:1;}
.z-list{display: flex;flex-direction: column;margin-top: 10rpx;}
.z-list navigator{border-bottom: 1rpx solid rgba(232,232,232,1);font-size:28rpx;font-family:PingFang SC;font-weight:500;color:rgba(20,20,20,1);opacity:1;padding: 22rpx 0;}

.z-list view{border-bottom: 1rpx solid rgba(232,232,232,1);font-size:28rpx;font-family:PingFang SC;font-weight:500;color:rgba(20,20,20,1);opacity:1;padding: 22rpx 0;}

.seemore{padding: 22rpx 0;font-size:23rpx;font-family:PingFang SC;font-weight:500;color:rgba(20,20,20,1); display: flex;align-items: center;justify-content: center;}

</style>